<template>
  <div class="cinema">
    <nav-bar>
      <div slot="left" class="title" @click="skipCities">
        <p>{{ cities.name }}</p>
        <span class="iconfont icon-jiantouxia"></span>
      </div>
      <p slot="center">影院</p>
      <p slot="right" class="title-right iconfont icon-fangdajing" @click="skipSearch"></p>
    </nav-bar>
    <cinema-list-tag @listTagClick="listTagClick" :cinemaListTag="cinemaListTag" ref="listTag" />
    <scroll class="scroll-content" :scrollbar="true" ref="scroll">
      <cinema-list :cinemaList="conformCitys" ref="cinemaMain" v-if="ticketFlag === 0" />
      <cinema-receptionist-list :cinemaList="conformReceptionistCitys" ref="cinemaMain" v-else />
    </scroll>
    <!-- 城市按钮的遮盖层 -->
    <convering
      v-show="activeCurrentIndex === 0"
      class="citysBg"
      @click.native="converingClick"
      :style="{ top: getPositionTop + 'px' }"
    >
      <viewing-cities :cinemaList="cinemaList" @cityBtn="cityBtn" />
    </convering>
    <!-- APP订票的遮盖层 -->
    <convering
      v-show="activeCurrentIndex === 1"
      class="citysBg"
      @click.native="converingClick"
      :style="{ top: getPositionTop + 'px' }"
    >
      <list-tag-row :dataList="appData" @changeFont="appChange" />
    </convering>
    <!-- 最近去过的遮盖层 -->
    <convering
      v-show="activeCurrentIndex === 2"
      class="citysBg"
      @click.native="converingClick"
      :style="{ top: getPositionTop + 'px' }"
    >
      <list-tag-row :dataList="recentlyData" @changeFont="recentlyChange" />
    </convering>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { cinemaList } from '@/network/cinema'
import CinemaListTag from '@/views/cinema/children/CinemaListTag.vue'
import CinemaList from '@/views/cinema/children/CinemaList'

import Convering from 'components/content/covering/Convering.vue'
import Scroll from 'components/common/scroll/Scroll.vue'

import ViewingCities from './children/ViewingCities.vue'
import ListTagRow from './children/listTagRow.vue'
import CinemaReceptionistList from './children/CinemaReceptionistList.vue'
export default {
  components: { CinemaListTag, CinemaList, Scroll, Convering, ViewingCities, ListTagRow, CinemaReceptionistList },
  name: 'Cinema',
  data() {
    return {
      cinemaList: [],
      cinemaReceptionistList: [],
      tagConvering: false,
      getPositionTop: 93,
      cinemaListTag: ['全城', 'APP订票', '最近去过'],
      appData: ['App订票', '前台兑换'],
      recentlyData: ['最近去过', '离我最近'],
      //激活的遮盖层  默认为全都不显示
      activeCurrentIndex: -1,
      filterStr: '',
      ticketFlag: 0
    }
  },
  created() {
    this.getCinemaList()
  },
  methods: {
    async getCinemaList(index) {
      const { data: res } = await cinemaList(index, this.cities.cityId)
      if (!this.ticketFlag) {
        this.cinemaList = res.cinemas
      } else {
        this.cinemaReceptionistList = res.cinemas
      }
    },
    skipSearch() {
      this.$router.push('/cinema/search')
    },
    listTagClick(index) {
      if (this.activeCurrentIndex === index) {
        this.activeCurrentIndex = -1
      } else {
        this.activeCurrentIndex = index
      }
    },
    converingClick() {
      this.activeCurrentIndex = -1
      this.$refs.listTag.currentIndex = -1
    },
    refreshHeight() {
      this.getPositionTop = this.$refs.cinemaMain.$el.offsetTop === 0 ? 93 : this.$refs.cinemaMain.$el.offsetTop
    },
    // 重新获取高度 获取过滤字符串 用$set方法修改信息
    cityBtn(city) {
      this.filterStr = city
      this.activeCurrentIndex = -1
      this.$refs.listTag.currentIndex = -1
      if (city) {
        this.$set(this.cinemaListTag, 0, city)
      } else {
        this.$set(this.cinemaListTag, 0, '全城')
      }
      this.$refs.scroll.refresh()
    },
    appChange(content, index) {
      this.$set(this.cinemaListTag, 1, content)
      this.ticketFlag = index
      this.getCinemaList(index + 1)
    },
    recentlyChange(content, index) {
      console.log(content, index)
      this.$set(this.cinemaListTag, 2, content)
    },
    skipCities() {
      this.$router.push('/city')
    }
  },
  computed: {
    ...mapState('cities', ['cities']),
    conformCitys() {
      if (this.filterStr) {
        return this.cinemaList.filter(city => city.districtName === this.filterStr)
      } else {
        return this.cinemaList
      }
    },
    conformReceptionistCitys() {
      if (this.filterStr) {
        return this.cinemaReceptionistList.filter(city => city.districtName === this.filterStr)
      } else {
        return this.cinemaReceptionistList
      }
    }
  },
  mounted(){
    this.refreshHeight()
  },
  updated() {
    this.refreshHeight()
  }
}
</script>

<style lang="scss" scoped>
.cinema {
  height: 100vh;
}
.title {
  display: flex;
  align-items: center;
  img {
    width: 0.06rem;
    margin-left: 0.05rem;
  }
}
.iconfont {
  font-size: 0.2rem;
}
.scroll-content {
  height: calc(100% - 0.49rem - 0.44rem - 0.49rem);
}
.citysBg {
  background: rgba($color: #000000, $alpha: 0.4);
}
.icon-jiantouxia {
  display: inline-block;
  font-size: 0.14rem !important;
  transform: scale(0.7);
}
</style>